<template>
  <div class="container">
    <div>list虚拟列表:</div>
    <ScrollLoadMore
      :distance="150"
      :error="error"
      :finished="finished"
      :loading="loading"
      :virtual-params="virtualParams"
      @load="loadMore"
      @retry="retryLoad"
    >
      <template #vitualList="option">
        <div :style="{ flex: 1, border: '1px solid #fff', height: '100%' }">
          {{ option.data.content }}
        </div>
      </template>
      <!-- 自定义加载提示 -->
      <template #loading>
        <div class="custom-loading">
          <div class="custom-spinner"/>
          <span>数据加载中，请稍候...</span>
        </div>
      </template>
      <!-- 自定义完成提示 -->
      <template #finished>
        <div class="custom-finished">
          <span>已加载全部数据</span>
        </div>
      </template>
    </ScrollLoadMore>
  </div>
</template>

<script setup lang="ts">
import type { Props as VirtualProps } from '@/components/global/MyInfiniteVirtualScroll/index.vue'

const props = defineProps<{
  gridSize?: number
}>()

// 模拟数据
interface DataItem {
  id: number
  content: string
}

const items = ref<DataItem[]>([])
const loading = ref(false)
const finished = ref(false)
const error = ref(false)
const page = ref(1)

const virtualParams = ref<VirtualProps<DataItem>>({
  containerHeight: 600,
  items: [],
  itemHeight: 60,
  gridSize: props.gridSize
})

// 加载更多数据
const loadMore = async() => {
  if (loading.value || finished.value) return
  
  loading.value = true
  error.value = false
  
  try {
    // 模拟API请求
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 模拟数据
    const newItems = Array.from({ length: 10 }, (_, i) => ({
      id: (page.value - 1) * 10 + i,
      content: `项目 ${(page.value - 1) * 10 + i} - 随机内容 ${Math.random().toString(36).substring(2, 7)}`
    }))
    
    items.value = [...items.value, ...newItems]
    virtualParams.value.items = items.value
    page.value += 1
    
    // 模拟结束条件
    if (page.value >= 10) {
      finished.value = true
    }
  } catch (err) {
    error.value = true
    console.error('加载数据出错:', err)
  } finally {
    loading.value = false
  }
}

// 重试加载
const retryLoad = () => {
  error.value = false
  loadMore()
}

// 初始加载
onMounted(() => {
  loadMore()
})
</script>

<style scoped>
.container {
  margin: 0 auto;
  padding: 20px;
  max-width: 800px;
}

.content {
  display: grid;
  gap: 16px;
}

.item {
  padding: 20px;
  background: green;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
  transition: transform 0.3s, box-shadow 0.3s;
}

.item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
}

.custom-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  color: #3498db;
}

.custom-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgb(52 152 219 / 20%);
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.custom-finished {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-weight: 500;
  color: #27ae60;
  gap: 8px;
}
</style>